<template>
  <div class="" :id="id" style="height:100px;width:120px;">


  </div>
</template>
<script setup>
import * as echarts from "echarts";
let props = defineProps({
  num: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  unit: {
    type: String,
    default: ''
  },
  id: {
    type: String,
    default: ''
  },

})

const LineBarChart = () => {

  let option = {
    title: {},
    tooltip: {},
    series: [{
      // name: this.title,
      type: 'pie',
      selectedMode: 'single',
      radius: ['80%', '100%'],
      clockwise: false,
      silent: true, // 不要鼠标放大
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        color (params) {
          var colorList = [
            '#198CFA', '#505050'
          ]
          return colorList[params.dataIndex]
        }

      },
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        { value: (Number(props.num) > 100 ? Number(props.num) % 100 : Number(props.num)), name: '使用' },
        { value: 100 - (Number(props.num) > 100 ? Number(props.num) % 100 : Number(props.num)), name: '未使用' }
      ]
    }],
    graphic: { // 新增原生图形元素组件
      elements: [{
        type: 'text', // 组件类型
        left: 'center', //定位
        top: '58%', // 定位
        style: { // 样式
          text: props.label, //文字
          fontSize: 14, //文字大小
          textAlign: 'center', //定位
          width: 30,
          height: 30,
          fill: '#fff', // 字体颜色
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '36%',
        style: {
          text: (props.num / 1).toFixed(2) + props.unit,
          fontSize: 14,
          textAlign: 'center',
          width: 30,
          height: 25,
          fill: '#FFC814',
        }
      }]
    },
  }
  return option;
}

let myChart = {};
myChart[props.id] = '';
onMounted(() => {
  if (myChart[props.id] != null && myChart[props.id] != "" && myChart[props.id] != undefined) {
    myChart[props.id].dispose();//销毁
  }
  myChart[props.id] = echarts.init(document.getElementById(props.id));
  // 配置option
  myChart[props.id].setOption(LineBarChart())
})
watch(
  () => props.num,
  (newVal, oldVal) => {
    if (myChart[props.id] != null && myChart[props.id] != "" && myChart[props.id] != undefined) {
      myChart[props.id].dispose();//销毁
    }
    myChart[props.id] = echarts.init(document.getElementById(props.id));
    myChart[props.id].setOption(LineBarChart())
  }
)

</script>

<style lang="scss" scoped>
.treeBox {
  width: 180px;
  border-right: solid 1px #fff;
  margin-right: 13px;
}
</style>